<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<title>web socket chat</title>
  <style type="text/css">    
        input#chat {    
            width: 410px    
        }    
    
        #console-container {    
            width: 400px;    
        }    
    
        #console {    
            border: 1px solid #CCCCCC;    
            border-right-color: #999999;    
            border-bottom-color: #999999;    
            height: 170px;    
            overflow-y: scroll;    
            padding: 5px;    
            width: 100%;    
        }    
    
        #console p {    
            padding: 0;    
            margin: 0;    
        }    
    </style> 
<script type="text/javascript">
	"use strict";
	var Chat = {};

	Chat.socket = null;

	Chat.connect = (function(host) {
		if ('WebSocket' in window) {
			Chat.socket = new WebSocket(host);
		} else if ('MozWebSocket' in window) {
			Chat.socket = new MozWebSocket(host);
		} else {
			Console.log('Error: 浏览器不支持WebSocket');
			return;
		}
		Chat.socket.onopen = function() {
			Console.log('Info: WebSocket open');
			document.getElementById('chat').onkeydown = function(event) {
				if (event.keyCode == 13) {
					Chat.sendMessage();
				}
			};
		};

		Chat.socket.onclose = function() {
			document.getElementById('chat').onkeydown = null;
			Console.log('Info: webcocket close===.');
		};

		Chat.socket.onmessage = function(message) {
			Console.log(message.data);
		};
	});

	Chat.initialize = function() {
		if (window.location.protocol == 'http:') {
			Chat.connect('ws://' + window.location.host + '/lcysite/chat/aaaa/tttt');
		} else {
			Chat.connect('wss://' + window.location.host + '/lcysite/chat');
		}
	};

	Chat.sendMessage = (function() {
		var message = document.getElementById('chat').value;
		if (message != '') {
			Chat.socket.send(message);
			document.getElementById('chat').value = '';
		}
	});

	var Console = {};

	Console.log = (function(message) {
		var console = document.getElementById('console');
		var p = document.createElement('p');
		p.style.wordWrap = 'break-word';
		p.innerHTML = message;
		console.appendChild(p);
		while (console.childNodes.length > 25) {
			console.removeChild(console.firstChild);
		}
		console.scrollTop = console.scrollHeight;
	});

	Chat.initialize();

	document.addEventListener("DOMContentLoaded", function() {
		// Remove elements with "noscript" class - <noscript> is not allowed in XHTML    
		var noscripts = document.getElementsByClassName("noscript");
		console.log(noscripts);
		for (var i = 0; i < noscripts.length; i++) {
			noscripts[i].parentNode.removeChild(noscripts[i]);
		}
	}, false);
	
</script>
</head>
<body>
<div class="noscript">
  <h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable    
    Javascript and reload this page!</h2></div>    
<div>    
    <p>    
        <input type="text" placeholder="输入文字，回车发送" id="chat" /><br>  
        notice:input to user send to the specific user<br>          
    </p>    
    <div id="console-container">    
        <div id="console"></div>    
    </div>    
</div> 
</body>
</html>